<template>
  <div class="home">
    <!-- 头部 -->
    <header>
      <div class="el-icon-search magnifier"></div>
      <span class="location" @click="jumpCity" v-text="location"></span>
      <span class="loginAndReg">
        <button @click="loginTo">登陆</button>
        <button @click="loginTo">注册</button>
      </span>
    </header>
    <!-- 食品分类 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <div class="foodList">
          <ul class="foodListUl">
            <li
              v-for="(v, i) in foodList"
              v-if="i < 8"
              :key="i"
              class="listOne"
              @click="jumpToListDetail(v)"
            >
              <div>
                <img
                  :src="'https://fuss10.elemecdn.com' + v.image_url"
                  alt=""
                  class="listOneImg"
                />
                <p v-text="v.title" class="listOneTitle"></p>
              </div>
            </li>
          </ul>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="foodList">
          <ul class="foodListUl">
            <li
              v-for="(v, i) in foodList"
              v-if="i > 7"
              :key="i"
              class="listOne"
              @click="jumpToListDetail(v)"
            >
              <div>
                <img
                  :src="'https://fuss10.elemecdn.com' + v.image_url"
                  alt=""
                  class="listOneImg"
                />
                <p v-text="v.title" class="listOneTitle"></p>
              </div>
            </li>
          </ul>
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 附近商家 -->
    <div class="restListObj">
      <p class="restTitle"><span class="el-icon-school"></span>附近商家</p>
      <ul>
        <li v-for="(v, i) in restList" :key="i" class="restLi" @click="jumpShop(v)">
          <div class="restListImg">
            <img :src="'https://elm.cangdu.org/img/' + v.image_path" alt="" />
          </div>
          <div class="restListMsg">
            <span v-text="v.name" class="rName"></span>
            <span v-for="(v1, i1) in v.supports" :key="i1" class="support">
              <span v-text="v1.icon_name"></span>
            </span>
            <p>
  <span class="rate">
              <van-rate
                v-model="v.rating"
                allow-half
                readonly
                :size="10"
                color="#ffd21e"
              />
              <span v-text="v.rating"></span>
            </span>
            <span
              v-text="'月售' + v.recent_order_num + '单'"
              class="rOrderNum"
            ></span>
            <span
              v-if="v.delivery_mode"
              v-text="v.delivery_mode.text"
              class="delMode"
            ></span>
            <span
              v-if="v.supports[1]"
              v-text="v.supports[1].name"
              class="onTime"
            ></span>
            </p>
          <p>
 
            <span
              v-text="'￥' + v.float_minimum_order_amount + '起送 /'"
              class="minAmount"
            ></span>
            <span v-text="v.piecewise_agent_fee.tips" class="fee"></span>
            <span v-text="v.distance + ' /'" class="rDistance"></span>
            <span v-text="v.order_lead_time" class="rLeadTime"></span>
          </p>
           
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部 -->
    <bottomNav></bottomNav>
  </div>
</template>

<script>
import { mapState } from "vuex";
import bottomNav from "./BottomNav.vue";
export default {
  name: "home",
  data() {
    return {
      location: "",
      foodList: {}, //食物列表
      restList: {}, //附近商家
    };
  },
  components: {
    bottomNav,
  },
  created() {
    this.location = this.nowPosition.address;
    // 获取食物列表
    this.getFoodList();
    // 获取附近商家
    this.getRestList();
    this.bottomActive=1
  },
  methods: {
    loginTo() {
      this.$router.push({
        name: "login",
      });
    },
    jumpCity() {
      this.$router.push({
        name: "city",
      });
    },
    // 获取食物列表
    getFoodList() {
      let api = this.eleUrl.foodList;
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.foodList = res.data;
       // console.log(res.data);
      });
    },
    // 获取附近商家
    getRestList() {
      let api =
        this.eleUrl.restList +
        "?latitude=" +
        this.nowPosition.latitude +
        "&longitude=" +
        this.nowPosition.longitude;
      this.$http({
        url: api,
        methods: "get",
      }).then((res) => {
        this.restList = res.data;
         console.log(res.data);
      });
    },
    // 跳转到列表详细
    jumpToListDetail(list) {
      this.$store.commit("getListMsg", list);
      this.$router.push({
        name: "listDetail",
      });
    },
    // 跳转到店铺主页
    jumpShop(shop){
      this.$store.commit("getShop",shop)
        this.$router.push({
          name:"shop"
        })
    }
  },
  computed: {
    ...mapState(["nowPosition", "eleUrl","bottomActive"]),
  },
};
</script>

<style scoped>
.home {
  font-size: 0.15rem;
  background-color: #ededed;
}
/* 头部 */
header {
  height: 0.5rem;
  width: 3.75rem;
  background-color: rgb(80, 143, 238);
}
header > span {
  color: white;
  line-height: 0.5rem;
  margin-left: 0.1rem;
}
header button {
  background-color: rgb(80, 143, 238);
  border: none;
  color: white;
  height: 0.25rem;
}
.loginAndReg {
  display: inline-block;
  float: right;
}
.magnifier {
  width: 0.5rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.2rem;
  color: white;
  float: left;
}
.location {
  display: inline-block;
  width: 2.1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 0.5rem;
}
/* 食品分类 */
.foodList {
  height: 3rem;
}
.foodListUl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.listOne {
  width: 25%;
  text-align: center;
  color: gray;
}
.listOneImg {
  width: 60%;
}
/* 轮播图 */
.my-swipe,
.van-swipe-item {
  height: 1.5rem;
  width: 100%;
  text-align: center;
  background-color: white;
}
.my-swipe >>> .van-swipe__indicator {
  background-color: rgb(0, 0, 255);
}
.my-swipe >>> .van-swipe__indicator--active {
  background-color: rgb(172, 170, 170) !important;
}
/* 附近商家 */
.restTitle {
  color: gray;
  padding: 0.1rem;
  font-size: 0.13rem;
}
.el-icon-school {
  font-size: 0.18rem;
  margin-right: 0.03srem;
}
.restListObj {
  width: 3.75rem;
  background-color: #fff;
  margin-top: 0.1rem;
}
.restLi {
  width: 3.75rem;
  height: 1rem;
}
.restListImg {
  float: left;
  width: 25%;
  height: 100%;
}
.restListImg > img {
  width: 80%;
  height: 80%;
  display: block;
  margin: 0.1rem auto;
}
.restListMsg span {
  display: inline-block;
}
.rName {
  font-size: 0.18rem;
  font-weight: bold;
  display: inline-block;
  width: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 0.55rem;
  margin-top: 0.1rem;
}
.rName::before {
  content: "\54C1\724C";
  display: inline-block;
  font-size: 0.1rem;
  line-height: 0.18rem;
  color: #333;
  background-color: #ffd930;
  padding: 0 0.03rem;
  border-radius: 0.05rem;
  margin-right: 0.08rem;
}
.support > span {
  border: 1px solid #ddd;
  color: gray;
  margin: 0.01rem;
  font-size: 0.1rem;
}
/* 评分星星 */
.rate {
  font-size: 0.1rem;
  margin-top: 0.1rem;
  margin-right: 0.05rem;
  color: orangered;
  width: 0.9rem;
}
.rOrderNum {
  font-size: 0.1rem;
  color: gray;
  width: 0.6rem;
}
.delMode {
  color: white;
  background-color: rgba(33, 145, 250, 0.849);
  font-size: 0.1rem;
  padding: 0.02rem;
  border-radius: 0.03rem;
  margin-left: .1rem;
}
.onTime {
  background-color: white;
  color: rgba(33, 145, 250, 0.849);
  border: 0.01px solid rgba(33, 145, 250, 0.849);
  font-size: 0.1rem;
  padding: 0.01rem;
}
.minAmount,
.fee,
.rDistance,
.rLeadTime {
  font-size: 0.08rem;
  color: gray;
  margin-top: 0.1rem;
}
.rLeadTime {
  color: rgb(48, 141, 247);
}

</style>